<template>
    <Modal v-model="visible" width="650" @on-visible-change="visibleChange">
        <p slot="header">
            <Icon type="logo-buffer" :size="22"/>
            <span style="margin-left: 0.5em">{{title}}</span>
        </p>
    <Form ref="objectData" :disabled="!canEdit" :model="objectData" :rules="ruleValidate"
          label-colon autocomplete="off"  :label-width="100">
        <FormItem label="名称"  prop="name">
            <Input v-model="objectData.name"></Input>
        </FormItem>
        <FormItem label="代码"  prop="code">
            <Input v-model="objectData.code"></Input>
        </FormItem>
        <FormItem label="类型" prop="codeType">
          <code-type-tag :disabled="true" v-model="codeType" code-type="dictionaryCategory" placeholder="请选择字典类型" />
        </FormItem>
      <FormItem label="上级" prop="parentCode" v-if="isTree===1">
        <code-type-tag v-if="show" :is-tree="true" v-model="objectData.parentCode" :code-type="codeType" placeholder="请选择上级" />
      </FormItem>
        <FormItem label="状态"  prop="valid">
            <i-switch v-model="objectData.valid" :true-value="1" :false-value="0" size="large">
                <span slot="open">开启</span>
                <span slot="close">关闭</span>
            </i-switch>
        </FormItem>
        <FormItem label="序号"  prop="orders">
            <InputNumber :min="0" v-model="objectData.orders"/>
        </FormItem>
        <FormItem label="说明"  prop="remark">
            <Input v-model="objectData.remark"></Input>
        </FormItem>
    </Form>
        <div slot="footer" v-show="canEdit">
            <Button @click="cancel">取消</Button>
            <Button type="primary" @click="handleSubmit('objectData')">保存</Button>
        </div>
    </Modal>
</template>

<script>
    import TreeSelect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    import {getTree,saveOrUpdate,getById} from "@/api/dictionaryApi"
    import {ruleValidate} from '@/views/settings/dictionary/validator/DictionaryRules'
    import codeTypeTag from '@/components/codeType/code-type-tag'
    export default {
        name: "dictionary-details",
        components: { TreeSelect,codeTypeTag},
        props:{
            showData:{
                type: Object,
                required: true
            },
            show: {
                type: Boolean,
                required: true
            },
            canEdit: {
                type: Boolean,
                required: true
            },
            reloadData: {
                type: Boolean,
                required: false,
                default: false
            },
            codeType: {
              type: String,
              required: true,
            },
            isTree:{
              type: Number,
              required: true,
            },
            title: {
                type: String,
                required: true,
            }
        },
        data () {
            return {
                visible: this.show,
                objectData: Object.assign({}, this.showData),
                ruleValidate,
                dictionaryTrees: []
            }
        },
        mounted(){
            this.loadData()
        },
        watch: {
            show (val) {
                this.visible = val
            },
            visible (val) {
                if (val) {
                    if (this.reloadData&&(this.showData.id!==null&&this.showData.id!==undefined)){
                     getById(this.showData.id).then(res=>{
                            this.objectData = res
                        })
                        console.log('showData',this.showData)
                    }else{
                        this.objectData = Object.assign({}, this.showData)
                        console.log('objectData',this.objectData)
                    }
                }
            }
        },
        methods: {
            loadData(){
                getTree().then(res=>{
                    this.dictionaryTrees = res
                })
            },
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let action = 'save';
                        if (this.objectData.id){
                          action= 'update'
                        }
                      this.objectData.codeType = this.codeType
                        saveOrUpdate(this.objectData,action).then(res=>{
                        this.$Message.success(res)
                        this.visible = false
                        this.$emit('callbackByOk')
                      })

                    }
                })
            },
            cancel () {
                this.visible = false
            },
            visibleChange(val){
                if (!val){
                    this.$emit('callbackByCancel')
                }
            }
        }
    }
</script>

<style scoped>

</style>